<script setup lang="ts">
    import { ref, getCurrentInstance } from 'vue';
    import type { EmojiParam } from '@/services/type';
    import { api } from '@/services/api';

    const internalInstance = getCurrentInstance();

    // 表情包列表
    import emojiList from '@/assets/json/emoji.json';
    
    // 我的表情包列表
    const myEmojiList = ref([]);
    // 表情包类型
    const type = ref<number>(0);
    // 是否显示自定义右键功能
    const visible = ref(false);
    // 左间距
    const left = ref(0);
    // 顶间距
    const top = ref(0);

    /**
     * 获取用户表情包列表
     */
    const getUserEmojis = () => {
        api.user.getUserEmojis().then(response => {
            if(response.code === 0) {
                myEmojiList.value = response.data;
            }
        });
    }

    // 选择表情包
    const chooseEmoji = (url: string, type: number) => {
        let emoji: EmojiParam = {
            url: url,
            type: type
        }
        if (type == 0) {
            emoji.width = "25px";
            emoji.height = "25px";
        }
        if (type == 1) {
            emoji.width = "50px";
            emoji.height = "100%";
        }
        if (internalInstance) {
            internalInstance.emit('choose', emoji);
        }
    }

    // 切换Tab
    const switchTab = (index: number) => {
        if(index === 1) {
            getUserEmojis();
        }
        type.value = index;
    }

    const uploadSectionFile = (param: any) => {
        const files: File = param.file
        // FormData 对象
        var formData = new FormData()
        // 文件对象
        formData.append('file', files)
        // 上传用户表情包
        api.user.uploadUserEmoji(formData).then(res => {
            if(res.code === 0) {
                // 获取用户表情包列表
                getUserEmojis();
            }
            
        })
    }

</script>
<template>
    <div class='emoji-container'>
        <div class="emojiBox" v-if="type == 0">
            <span class="emoji-item" v-for="(item, index) of emojiList" :key="index" @click="chooseEmoji(item.url, 0)">
                <img :src="item.url" class="emoji" :title="item.name" />
            </span>
        </div>
        <div class="emojiBox" v-if="type == 1">
            <ul id="collectEmoji">
                <li class="collect-emoji" v-for="(item, index) in myEmojiList" :key="index"
                    @contextmenu.prevent="openMenu($event, item, index)" @click="chooseEmoji(item.expressionUrl, 1)">
                    <img :src="item.expressionUrl" alt="">
                </li>
                <li class="collect-emoji upload-emoji">
                    <el-upload class="avatar-uploader" :http-request="uploadSectionFile"
                        :show-file-list="false" multiple>
                        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </li>
            </ul>
            <!-- 自定义右键功能 -->
            <ul 
                v-show="visible" 
                ref="contextMenu"
                :style="{ left: left + 'px', top: top + 'px' }" 
                class="contextmenu" 
                tabindex="1" 
                @blur="onBlur"
            >
                <li @click.stop="handleStick">
                    <div class="menuitem">
                        <i class="el-icon-upload2"></i>置顶
                    </div>
                </li>
                <li @click.stop="handleDelete">
                    <div class="menuitem">
                        <i class="el-icon-delete"></i>删除
                    </div>
                </li>
            </ul>
        </div>
        <div class="btnBox">
            <div @click="switchTab(0)">
                <svg-icon href='#icon-face' width="30px" height="30px" fill="#707070" :class="(type === 0 ? 'active' : '')"></svg-icon>
            </div>
            <div @click="switchTab(1)">
                <svg-icon href='#icon-love' width="30px" height="30px" fill="#707070" :class="(type === 1 ? 'active' : '')"></svg-icon>
            </div>
        </div>
    </div>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />